<template>
  <div class="ly-tabs" :class="tabsClass">
    <div class="ly-tabs_header">
      <div class="ly-tabs_nav_wrap">
        <div
          v-for="(item, index) in tabsList"
          :key="index"
          :class="itemClass(index)"
          ref="tablists"
          @click="tabsChange($event,index)"
        >
          {{ item.label }}
        </div>
        <div class="ly-tabs-line" :style="lineStyle"></div>
      </div>
    </div>
    <div class="ly-tabs-content">
      <slot />
    </div>
  </div>
</template>
<script>
export default {
  name: "lyTabs",
  props: {
    type: {
      type: String,
      default: "nomral",
    },
    value: {
      type: String,
      default: "",
    },
    lineColor: {
      type: String,
      default: "#409eff",
    },
  },
  data() {
    return {
      tabsList: [],
      lineWidth: 20,
      currentTabIndex: "",
      translateX: 0,
    };
  },
  computed: {
    tabsClass() {
      return {
        [`ly-tabs--${this.type}`]: this.type,
      };
    },
    //底部线条样式
    lineStyle() {
      return {
        width: `${this.lineWidth}px`,
        transform: `translateX(${this.translateX}px)`,
        backgroundColor: `${this.lineColor}`,
      };
    },
  },
  mounted() {
    this.tabsList = this.$children.map((v) => {
      return {
        label: v.label,
        name: v.name,
      };
    });
  },
  methods: {
    //tab切换事件
    tabsChange(event,index) {
      console.log(event,'eevvt')
      this.currentTabIndex = index;
    },
    //content的显示和隐藏
    showContent(n = this.currentTabIndex) {
      this.$children.forEach((v, i) => {
        v.show = false;
        n == i && (this.$children[i].show = true);
      });
    },
    //头部样式
    itemClass(i) {
      return [
        "ly-tabs-item",
        {
          "is-active":i == this.currentTabIndex,
          "ly-tabs-item_frist": i == 0,
          "ly-tabs-item_last": i == this.tabsList.length - 1,
        },
      ];
    },
  },
  watch: {
    value(n) {
      this.currentTabIndex = this.tabsList.findIndex((v) => v.name == n);
    },
    tabsList() {
      this.currentTabIndex = this.tabsList.findIndex(
        (v) => v.name == this.value
      );
      this.showContent();
    },
    currentTabIndex(n) {
      if (n < 0) return;
      this.$nextTick().then((res) => {
        let tabRefs = this.$refs.tablists[n];
        if (n == 0) {
          this.lineWidth = tabRefs.offsetWidth - 20;
          this.translateX = tabRefs.offsetLeft;
        } else if (n == this.tabsList.length - 1) {
          this.lineWidth = tabRefs.offsetWidth - 20;
          this.translateX = tabRefs.offsetLeft + 20;
        } else {
          this.lineWidth = tabRefs.offsetWidth - 40;
          this.translateX = tabRefs.offsetLeft + 20;
        }
        this.showContent(n);
      });
    },
  },
};
</script>
<style lang="scss">
$prefixCls: "ly-tabs";
.#{$prefixCls} {
  text-align: left;
  &--nomral {
    .#{$prefixCls}_nav_wrap {
      position: relative;
      .is-active{
        color: #409eff;
      }
      &::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        background-color: #e4e7ed;
        z-index: 1;
      }
    }
    .ly-tabs-line {
      position: absolute;
      bottom: 0;
      left: 0;
      height: 2px;
      background-color: #409eff;
      z-index: 2;
      transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      list-style: none;
    }
    .ly-tabs_header {
      padding: 10px;
      .#{$prefixCls}_nav_wrap {
        position: relative;
        width: 100%;
        .#{$prefixCls}-item {
          &_frist {
            padding-left: 0;
          }
          .#{$prefixCls}-item_last {
            padding-right: 0;
          }
          display: inline-block;
          height: 40px;
          line-height: 40px;
          padding: 0 20px;
          cursor: pointer;
        }
      }
    }
  }

  &--card {
    .ly-tabs_header {
      padding: 0px 10px 0 0px;
      border-bottom: 1px solid #e4e7ed;
      overflow: hidden;
      margin-bottom: -1px;
      .#{$prefixCls}_nav_wrap {
        display: inline-block;
        border: 1px solid #e4e7ed;
        border-bottom: none;
        border-radius: 4px 4px 0 0;
        box-sizing: border-box;
        .#{$prefixCls}-item {
          &.is-active{
            color: #409eff;
            border-bottom-color: #fff
          }
          &_frist {
            border-left: none;
          }
          .#{$prefixCls}-item_last {
            padding-right: 0;
          }
          display: inline-block;
          height: 40px;
          line-height: 40px;
          padding: 0 20px;
          cursor: pointer;
          border-bottom: 1px solid transparent;
          border-left: 1px solid #e4e7ed;
        }
      }
    }
  }
}
</style>